<template>
    <div id="seckill">
        <div class="seckill-good">
            <div class="seckill-left">
                图片
            </div>

            <div class="seckill-right">
                <div>数量 {{ seckillGood.goodsPrice }}</div>
                <div>单价 {{ seckillGood.goodsPrice }}</div>
                <div><button class="button is-primary" v-on:click="doSeckill(seckillGood)">doSeckill</button></div>
            </div>
        </div>

        <!-- <div class="modal" v-bind:class="{ 'is-active': isActive }">
            <div class="modal-background"></div>
            <div class="modal-content">
                {{ msg }}
            </div>
            <button class="modal-close is-large" aria-label="close" v-on:click="closeModal"></button>
        </div> -->

        <div class="modal" v-bind:class="{ 'is-active': isActive }">
            <div class="modal-background"></div>
            <div class="modal-card">
                <header class="modal-card-head">
                    <p class="modal-card-title">Modal title</p>
                    <button class="delete" aria-label="close" v-on:click="closeModal"></button>
                </header>
                <section class="modal-card-body">
                    {{ msg }}
                </section>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: 'Seckill',
    props: ['id'],
    data() {
        return {
            isActive: false,
            code: '',
            msg: '',
            body: {}
        }
    },
    computed: {
        seckillGood() {
            return this.$store.getters.goodItemFromId(Number(this.id));
        }
    },
    methods: {
        doSeckill(seckillGood) {
            var _this = this;
            console.log(seckillGood);
            this.$store
            .dispatch('doSeckill', seckillGood)
            .then((response) => {
                console.log("doSeckill finish");
                console.log(response.data);
                _this.isActive = true;
                _this.code = response.data.code;
                _this.msg = response.data.msg;
                _this.body = response.data.body;

                var clearBlockTimer = false;
                var countBlockTimer = 0;
                var blockTimer = setInterval(function(){
                    console.log("阻塞中...");
                    countBlockTimer = countBlockTimer + 1;
                    if (countBlockTimer >= 10) {
                        clearBlockTimer = true;
                    }

                    if (clearBlockTimer) {
                        clearInterval(blockTimer);
                    }
                }, 1000);


                if (_this.code == 0) {
                    _this.msg = '抢购中...';

                var clearTimer = false;
                var countTimer = 0;
                var timer = setInterval(function() {

                    _this.$store
                    .dispatch('findSeckill', seckillGood)
                    .then((response) => {
                        console.log("findSeckill finish");
                        console.log(response.data);
                        var orderId = response.data.body;
                        if (orderId > 0) {
                            clearTimer = true;
                        }
                    });

                    countTimer = countTimer + 1;
                    if (countTimer >= 10) {
                        clearTimer = true;
                    }

                    if (clearTimer) {
                        clearInterval(timer);
                        _this.closeModal();
                    }
                }, 1000);
                }

                else {
                    console.log("抢购失败...");
                }
            });
        },
        closeModal() {
            console.log(this.isActive);
            console.log(this.code);
            console.log(this.msg);
            console.log(this.body);
            this.isActive = false;
            this.$store.dispatch('getGoodItems');
            this.$store.dispatch('getOrderItems');
            this.$router.push({path: '/orders'});
        }
    }
}
</script>

<style scoped>
.seckill-good {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}
</style>